<template>
  <el-drawer :title="title"
             :visible.sync="visible"
             :before-close="handleClose"
             direction="rtl">
    <el-form ref="form"
             :model="user"
             label-width="100px">
      <el-form-item label="头像">
        <el-avatar size="medium"
                   :src="user.avatar.url"></el-avatar>
      </el-form-item>
      <el-form-item label="账户">
        <el-input v-model="user.name"
                  disabled></el-input>
      </el-form-item>
      <el-form-item label="积分">
        <el-input v-model="user.score"
                  disabled></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input v-model="user.nick_name"
                  disabled></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="user.email"
                  disabled></el-input>
      </el-form-item>
      <el-form-item label="网站">
        <el-input v-model="user.website"
                  disabled></el-input>
      </el-form-item>
      <el-form-item label="签名">
        <el-input type="textarea"
                  v-model="user.signature"
                  disabled></el-input>
      </el-form-item>
      <el-form-item label="注册时间">
        <el-input :value="formatTime(user.created_at)"
                  suffix-icon="el-icon-date"
                  disabled></el-input>
      </el-form-item>
      <el-form-item label="活跃时间">
        <el-input :value="formatTime(user.active_at)"
                  suffix-icon="el-icon-date"
                  disabled></el-input>
      </el-form-item>
      <el-form-item label="账号状态">
        <template v-if="user.is_unusual">
          <el-tag type="danger"
                  v-if="user.is_disabled">禁用</el-tag>
          <el-tag type="danger"
                  v-if="user.is_muted">禁言</el-tag>
        </template>
        <template v-else>
          <el-tag>正常</el-tag>
        </template>
      </el-form-item>
      <el-form-item label="身份">
        <template v-if="user.roles.length">
          <el-tag v-for="(role,index) in user.roles"
                  :key="index">{{role}}</el-tag>
        </template>
        <template v-else>
          <el-tag>普通用户</el-tag>
        </template>
      </el-form-item>
      <el-form-item label="操作">
        <template v-if="user.is_disabled">
          <el-button type="warning"
                     @click="authority(user.id,'removeBlack','取消拉黑')"
                     size="small">取消拉黑</el-button>
        </template>
        <template v-else>
          <el-button type="warning"
                     @click="authority(user.id,'moveBlack','拉黑')"
                     size="small">拉黑</el-button>
        </template>
        <template v-if="user.is_muted">
          <el-button type="warning"
                     @click="authority(user.id,'removeMuted','取消禁言')"
                     size="small">解除禁言</el-button>
        </template>
        <template v-else>
          <el-button type="warning"
                     @click="authority(user.id,'muted','禁言')"
                     size="small">禁言</el-button>
        </template>
        <el-button type="warning"
                   @click="resetPassword(user.id)"
                   size="small">重置密码</el-button>
        <el-button type="warning"
                   @click="invalidToken(user.id)"
                   size="small">失效Token</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
import { fetchView, authority, resetPassword, invalidToken } from '@/views/user/api'
import imageInput from '@/components/image-input'
import { timeFormat } from '@/utils/filters'

export default {
  data () {
    return {
      visible: false,
      title: '用户详情',
      user: {
        avatar: {},
        roles: []
      },
      refresh: false
    }
  },
  filters: {
    timeFormat
  },
  components: {
    imageInput
  },
  methods: {
    formatTime (time) {
      return timeFormat(time)
    },
    async fetch (id) {
      await fetchView(id).then(({ data: { data } }) => {
        this.user = data
      })
    },
    async open (id, title = '用户详情') {
      this.visible = true
      this.title = title + `（ID：${id}）`
      await this.fetch(id)
      return new Promise((resolve, reject) => {
        this._resolve = resolve
        this._reject = reject
      })
    },
    async authority (id, action, message) {
      const { $confirm, $message, fetch } = this
      await $confirm(`确定要${message}用户嘛？`, {
        title: '警告'
      })
      await authority(id, { action }).then(({ data: { data } }) => {
        this.refresh = true
      })
      $message.success('处理成功')
      await fetch(id)
    },
    async resetPassword (id) {
      const { $confirm, $message } = this
      await $confirm('重置密码将会邮件通知对应用户，确定要重置嘛？', {
        title: '警告'
      })
      await resetPassword(id)
      $message.success('密码已重置为初始密码')
    },
    async invalidToken (id) {
      const { $confirm, $message } = this
      await $confirm('此操作将失效用户的所有现有AccessToken，确定要执行嘛？', {
        title: '警告'
      })
      await invalidToken(id)
      $message.success('处理成功')
    },
    handleClose (done) {
      this._resolve(this.refresh)
      done()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-drawer__body {
  padding-top: 20px;
  overflow: hidden;
}
.el-form-item {
  margin-bottom: 15px;
  text-align: left;
}
</style>
